<template>
  <!--  <el-container></el-container>-->

    <el-menu
            default-active="/"
            class="el-menu-vertical-demo"
            :collapse="isCollapse"
            @open="handleOpen"
            @close="handleClose"
            router="true"
    >
        <el-menu-item index="/test">
            <el-icon>
                <icon-menu/>
            </el-icon>
            <template #title>首页</template>
        </el-menu-item>
        <el-menu-item index="/login">
            <el-icon>
                <document/>
            </el-icon>
            <template #title>获取课表</template>
        </el-menu-item>
        <el-menu-item index="4">
            <el-icon>
                <setting/>
            </el-icon>
            <template #title>设置</template>
        </el-menu-item>
        <el-menu-item index="" @click="toggleDark()">
            <button class="border-none w-full bg-transparent cursor-pointer">
                <i inline-flex i="dark:ep-moon ep-sunny"/>
            </button>
        </el-menu-item>
    </el-menu>

</template>

<script lang="ts" setup>
import {ref} from 'vue'
import {
    Location,
    Document,
    Menu as IconMenu,
    Setting,
} from '@element-plus/icons-vue'
import {calendarProps} from "element-plus";
import {toggleDark} from '~/composables';

const isCollapse = ref(false)
const handleOpen = (key: string, keyPath: string[]) => {
    console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
    console.log(key, keyPath)
}

</script>

<!--<style scoped>-->
<!--.el-menu-vertical-demo {-->
<!--  /*height: 100%;*/-->
<!--  /*  高度铺满屏幕*/-->
<!--  height: 92vh;-->
<!--}-->


<!--</style>-->

